<template>
	<div id="historyPage">
		<div class="title"><i class="iconfont icon-icon1"></i>欢迎来到全宇支付平台</div>
		<!--实线-->
		<div class="solid"></div>

		<div class="main">
			<h3>历史登录</h3>
			<div class="mainContent">

				<el-table :data="tableData" border style="width: 100%" v-loading="loading">
					<el-table-column type="index" width="50">
					</el-table-column>
					<el-table-column prop="ip" label="IP地址">
					</el-table-column>
					<el-table-column prop="createTime" label="登录时间">
					</el-table-column>

				</el-table>

				<div class="block" style="text-align: right;padding-right: 40px;">

					<el-pagination :current-page.sync="pageNumber" @current-change='handleChange' :page="pageNumber" :page-size="pageSize" layout="total, prev, pager, next" :total="total">
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import dateformat from 'dateformat'
	export default {
		data() {
			return {
				pageNumber: 1,
				pageSize: 10,
				total: 1,
				loading:false,
				tableData: [{
					date: '2016-05-02',
					address: '172.165.2.32'
				}, {
					date: '2016-05-04',

					address: '172.165.2.32'
				}, {
					date: '2016-05-01',

					address: '172.165.2.32'
				}, {
					date: '2016-05-03',

					address: '172.165.2.32'
				}]
			}
		},
		created() {
			this.getHistoryList()
		},
		methods: {

			getHistoryList() {
				this.loading = true;
				let params ={
					pageSize:this.pageSize,
					pageNumber :this.pageNumber
				}
                 this.$api.getLoginLog(params).then( res =>{
                 	if(res.data.code == '000000'){
                 		 console.log(res.data);
                 		 this.loading = false;
                 		  this.total = res.data.data.totalRow;
                 		 this.tableData = res.data.data.list;
                 		  this.tableData.forEach(item =>{
                 		  	let date = new Date(item.createTime);
								item.createTime = dateformat(date,'yyyy-mm-dd HH:MM:ss')
                 		  })
                 		
                 	}else{
                 		this.$message.error("获取历史登录失败");
                 			 this.loading = false;
                 	}
                 }).catch(() =>{
                 		this.$message.error("获取历史登录失败");
                 			 this.loading = false;
                 	})
			},
			handleChange(val) {
				this.pageNumber = val;
				this.getHistoryList()
			}
		}
	}
</script>

<style lang="less">
	#historyPage {
		padding: 20px;
		.icon-icon1 {
			font-size: 35px!important;
			margin-right: 35px;
			position: absolute;
			color: #008000;
			right: 100px;
			bottom: -8px;
		}
		th {
			text-align: center;
		}
		.title {
			text-align: right;
			font-size: 12px;
			margin-bottom: 10px;
			position: relative;
		}
		.icon-icon1 {
			font-size: 25px;
		}
		.solid {
			background-color: black;
			height: 2px;
		}
		.main {
			h3 {
				padding: 20px;
			}
			.mainContent {
				width: 70%;
				margin: auto;
				max-width: 700px;
			}
		}
	}
</style>